<template>
  <a-drawer
    width="70%"
    :title="state.title"
    placement="right"
    :visible="state.visible"
    @close="closeDialog"
  >
    <div class="desc">
      <div class="kanban">
        <div
          class="kanban-desc"
          v-for="(item, index) in state.columns"
          :key="index"
        >
          <div class="kanban-desc-label">
            {{ item.label }}
            <template v-if="item.tip">
              <a-tooltip>
                <template #title>
                  {{ item.tip }}
                </template>
                <a-icon type="info-circle" />
              </a-tooltip>
            </template>
            ：
          </div>
          <div class="kanban-desc-value">
            {{
              state.form[item.key] || state.form[item.key] === 0
                ? formatByOptions(item, state.form[item.key])
                : ''
            }}
          </div>
        </div>
        <div class="kanban-desc" v-if="type === 1">
          <div class="kanban-desc-label">
            <a-button type="primary" size="small" @click="state.mxShow = true">
              出入库明细
            </a-button>
          </div>
          <div class="kanban-desc-value" />
        </div>
      </div>
      <div>
        <viewImg :src="state.url ? state.url : state.cupsheImg" class="w80" />
      </div>
    </div>
    <template v-if="type === 1">
      <remote-table
        :show-selection="false"
        :row-key="r => r.id"
        :table-columns="[]"
        ref="tableRef"
        :has-refresh="false"
        :has-reset="false"
        :menu-name="state.menuName"
        :interface-u-r-l="state.interfaceURL"
        :api-params="{}"
        :query-params="state.queryParams"
      />
    </template>
    <template v-else>
      <a-table :columns="state.spListColumns" :data-source="state.spList">
        <a slot="ossUrl" slot-scope="text">
          <viewImg :src="text" class="w80" />
        </a>
      </a-table>
    </template>

    <a-drawer
      v-if="state.mxShow"
      width="90%"
      :title="'出入库明细'"
      placement="right"
      :visible="state.mxShow"
      @close="state.mxShow = false"
    >
      <remote-table
        :show-selection="false"
        :row-key="r => r.id"
        :table-columns="[]"
        ref="tableRef"
        :has-refresh="false"
        :has-reset="false"
        :menu-name="state.mxMenuName"
        :interface-u-r-l="state.mxInterfaceURL"
        :api-params="{}"
        :query-params="state.mxQueryParams"
      >
        <template #materialOssRelationsCR="{ record }">
          <ViewImg class="w80" :list-src="getImages(record)" />
        </template>
      </remote-table>
    </a-drawer>
  </a-drawer>
</template>
<script>
import API from '@/api/plan'
const ML_TYPE = 1
const SP_TYPE = 2
const mlConfig = {
  type: ML_TYPE,
  menuName: 'materialPreparationMateriaBoardlMLBL',
  interfaceURL: 'preparation-plan-mlbl/material-board-list',
  title: '面料看板',
  mxMenuName: 'materialInventoryIODetails',
  mxInterfaceURL: 'inventory-material/list-in-out-details'
}
const spConfig = {
  type: SP_TYPE,
  menuName: 'materialPreparationChengYiBoardMLBL',
  interfaceURL: 'preparation-plan-mlbl/skc-board-list',
  title: '成衣看板',
  mxMenuName: 'clothseInventoryIODetails',
  mxInterfaceURL: 'inventory-clothes/inout-details-clothes'
}
export default {
  name: 'Kanban',
  props: {
    type: {
      type: Number,
      default: ML_TYPE
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      state: {
        cupsheImg: this.cupsheImg,
        mxQueryParams: {},
        mxInterfaceURL: mlConfig.mxInterfaceURL,
        mxMenuName: mlConfig.mxMenuName,
        mxShow: false,
        url: '',
        visible: true,
        menuName: mlConfig.menuName,
        interfaceURL: mlConfig.interfaceURL,
        title: mlConfig.title,
        queryParams: {},
        columns: [],
        form: {},
        mlColumns: [
          { label: '物料编号', key: 'materialTypeNo' },
          { label: '物料名称', key: 'materialName' },
          { label: '供应商代码', key: 'factoryCode' },
          {
            label: '渠道',
            key: 'channelId',
            options: [
              { label: '独立站', value: 1 },
              { label: '多渠道', value: 2 }
            ]
          },
          { label: '面料供应商', key: 'supplierName' },
          {
            label: '总库存(米)',
            key: 'inventoryTotal',
            tip: '此物料在当前渠道下所有供应商的库存数量'
          },
          {
            label: '该供应商可用库存(米)',
            key: 'inventory',
            tip: '此物料在当前渠道下此供应商的库存数量'
          }
        ],
        spColumns: [
          { label: 'CP', key: 'cp' },
          { label: 'SKC', key: 'skc' },
          { label: 'BOM版本', key: 'bomVersionStr' },
          {
            label: '渠道',
            key: 'channelId',
            options: [
              { label: '独立站', value: 1 },
              { label: '多渠道', value: 2 }
            ]
          },
          { label: '成衣供应商', key: 'supplierName' },
          {
            label: '大类',
            key: 'businessType',
            options: [
              { label: '泳衣', value: 1 },
              { label: '创新业务', value: 2 }
            ]
          },
          {
            label: '总库存(件)',
            key: 'inventoryTotal',
            tip: '此物料在当前渠道下所有供应商的库存数量'
          },
          {
            label: '该供应商可用库存(件)',
            key: 'inventory',
            tip: '此物料在当前渠道下此供应商的库存数量'
          }
        ],
        spListColumns: [
          {
            title: '面料编码',
            dataIndex: 'materialTypeNo',
            key: 'materialTypeNo'
          },
          {
            title: '面料图片',
            dataIndex: 'ossUrl',
            key: 'ossUrl',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '供应商',
            dataIndex: 'supplierName',
            key: 'supplierName'
          },
          {
            title: '面料颜色',
            dataIndex: 'materialColor',
            key: 'materialColor'
          },
          {
            title: '确认色号',
            dataIndex: 'confirmColor',
            key: 'confirmColor'
          },
          {
            title: '单件用量(m)',
            dataIndex: 'singleDosage',
            key: 'singleDosage'
          },
          {
            title: '可用库存(m)',
            dataIndex: 'availableInventory',
            key: 'availableInventory'
          },
          {
            title: '可生产数量(件)',
            dataIndex: 'producibleQuantity',
            key: 'producibleQuantity'
          }
        ],
        spList: []
      }
    }
  },
  created() {
    if (this.type === ML_TYPE) {
      this.state.menuName = mlConfig.menuName
      this.state.interfaceURL = mlConfig.interfaceURL
      this.state.title = mlConfig.title
      this.state.queryParams = {}
      this.state.columns = this.state.mlColumns
    } else if (this.type === SP_TYPE) {
      this.state.menuName = spConfig.menuName
      this.state.interfaceURL = spConfig.interfaceURL
      this.state.title = spConfig.title
      this.state.queryParams = {
        purchaseId: this.params.purchaseId ? this.params.purchaseId : ''
      }
      this.state.columns = this.state.spColumns
      this.getSpList()
    }
    this.getFormList()
  },
  methods: {
    async getFormList() {
      const result =
        this.type === ML_TYPE
          ? await API.fetchList(
              '/preparation-plan-mlbl/material-board-info',
              {}
            )
          : await API.fetchList('/preparation-plan-mlbl/skc-board-info', {
              purchaseId: this.params.purchaseId ? this.params.purchaseId : ''
            })
      this.state.form = result
      this.state.url = result.url ? result.url : ''
      if (this.type === ML_TYPE) {
        this.state.mxQueryParams = {
          materialTypeNo: this.state.form.materialTypeNo
            ? [this.state.form.materialTypeNo]
            : ''
        }
      } else {
        this.state.mxQueryParams = {
          skc: this.state.form.skc ? [this.state.form.skc] : []
        }
      }
    },
    closeDialog() {
      this.$emit('close')
    },
    formatByOptions(item, value) {
      let formatValue = JSON.parse(JSON.stringify(value))
      if (item.options) {
        item.options.forEach(item => {
          if (item.value === value) {
            formatValue = item.label
          }
        })
      }
      return formatValue
    },
    getImages(record) {
      const imgs = []
      if (
        record.materialOssRelations &&
        record.materialOssRelations.length > 0
      ) {
        record.materialOssRelations.forEach(item => {
          imgs.push(item.ossUrl)
        })
      }
      return imgs
    },
    async getSpList() {
      const result = await API.fetchList(
        '/preparation-plan-mlbl/skc-board-list',
        this.state.queryParams
      )
      if (result && result.list && result.list.length > 0) {
        this.state.spList = result.list
      }
    }
  }
}
</script>

<style lang="less" scoped>
.desc {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.kanban {
  flex: 1;
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  &-desc {
    display: flex;
    align-items: center;
    &-label {
      font-weight: bold;
    }
  }
}
</style>
